<style scoped>
    .ivu-number-info-subTitle {
    font-weight: bold;
}

.ivu-number-info-subTitle,
.ivu-number-info-value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

.ivu-number-info-subTotal,
.ivu-number-info-total {
    display: inline-block;
    height: 32px;
    line-height: 32px;
}

.ivu-number-info-total {
    margin-right: 32px;
    color: #515a6e;
    font-size: 24px;
}

.ivu-number-info-subTotal {
    margin-right: 0;
    vertical-align: top;
    font-size: 14px;
    color: #808695;
}

.ivu-trend {
    display: inline-block;
}

.ivu-trend-text {
    vertical-align: middle;
}

.ivu-trend-flag {
    color: #19be6b;
}

.ivu-page-header-title {
    display: inline-block;
    color: #17233d;
    font-weight: 500;
    font-size: 20px;
}

.ivu-description-term {
    display: table-cell;
    padding-bottom: 16px;
    line-height: 20px;
}

.ivu-description-detail {
    width: 100%;
    color: #515a6e;
}
</style>
<template>
    <div>
        <div class="ivu-mt">
            <el-card :bordered="false">
                <p class="card-title">
                    {{$t('message.term.order')}}
                </p>
                <el-divider dashed />
                <div class="ivu-page-header-main">
                    <div class="ivu-page-header-row">
                        <!---->
                        <div class="ivu-page-header-title">
                            <div>订单号：{{orderSN}}</div>
                        </div>
                        <!---->
                    </div>
                    <div>
                        <div class="ivu-description-term">创建时间：{{gmtCreated}}</div>
                    </div>
                </div>
                <el-divider dashed />
                <el-table :columns="columnsDefinition" :data="dataList"></el-table>
                <el-divider dashed />
                <div class="ivu-number-info">
                    <!---->
                    <div class="ivu-number-info-subTitle">总价(元)</div>
                    <div class="ivu-number-info-value" style="margin-top: 8px;">
                        <span class="ivu-number-info-total">{{totalPrice}}</span>
                    </div>
                </div>
                <el-divider dashed />
                <div class="ivu-number-info">
                    <el-form ref="form" :model="form" :rules="ruleValidate" label-width="80">
                        <el-form-item label="邮箱地址" prop="email">
                            <el-input v-model="form.email" prefix="ios-mail-outline" placeholder="请输入接收文档的邮箱地址" style="width: 300px" />
                        </el-form-item>
                    </el-form>
                </div>
                <el-divider dashed />
                <div style="text-align: right;  margin-top: 20px">
                    <el-button type="success" @click="send()">发送</el-button>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
import { API } from '@/customized/http/api';

export default {
    components: {

    },
    data() {
        return {
            timer: '',
            columnsDefinition: [{
                    title: '文件名',
                    key: 'goods_name',
                    ellipsis: true,
                    tooltip: true
                },
                {
                    title: '原价格(元)',
                    key: 'goods_price'
                },
                {
                    title: '价格(元)',
                    key: 'finalPrice'
                },
                {
                    title: '优惠',
                    key: 'discountName'
                }
            ],
            dataList: [],
            totalPrice: 0,
            gmtCreated: "",
            form: {
                email: ""
            },
            ruleValidate: {
                email: [
                    { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                    { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
        /* 监听订单变化 */
        orderSN() {
            return this.$route.params.orderSN;
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.loadDocList();
            this.loadCustomerEmail();
        });
    },
    beforeDestroy() {

    },
    methods: {
        loadDocList() {
            API.orderDetail({ sn: this.orderSN })
                .then((response) => {
                    let orderDetail = response.data;

                    this.gmtCreated = orderDetail.order.gmt_created;
                    this.dataList = orderDetail.orderItems;

                    this.totalPrice = orderDetail.order.total_price;
                }).catch((error) => {
                    console.log(error);
                });
        },
        send() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    API.deliver({ sn: this.orderSN, email: this.form.email })
                        .then((response) => {
                            let result = response.data;
                            console.log("deliver ==> " + result);

                            this.$router.push({
                                name: `success`,
                                params: {
                                    desc: '发送文档成功，请您到邮箱查收',
                                    extra: '如果您的邮箱没有接收到邮件，请稍等片刻，有任何疑问可联系客服'
                                }
                            })
                        }).catch((error) => {
                            console.log(error);
                        });
                } else {
                    this.$Message.error('请确认邮箱地址是否正确');
                }
            })
        },
        loadCustomerEmail() {
            API.getCustomerEmailAddress({})
                .then((response) => {
                    this.form.email = response.data;
                }).catch((error) => {
                    console.log(error);
                });
        }
    }
}
</script>